<template>
  <div class="orderSet">
    <el-radio-group v-model="labelPosition" size="small"> </el-radio-group>
    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :model="formLabelAlign"
    >
      <div style="margin-left: 60px">
        <el-form-item label="秒杀订单超过:" label-width="100px">
          <el-input v-model="input" placeholder="70"></el-input
          ><span class="span">分</span>
          <span class="order">未付款，订单自动关闭</span>
        </el-form-item>

        <el-form-item label="正常订单超过:" label-width="100px">
          <el-input v-model="input1" placeholder="120"></el-input
          ><span class="span">分</span>
          <span class="order">未付款，订单自动关闭</span>
        </el-form-item>

        <el-form-item label="发送超时:" label-width="100px">
          <el-input v-model="input2" placeholder="15"></el-input
          ><span class="span">分</span>
          <span class="order">未收货，订单自动完成</span>
        </el-form-item>

        <el-form-item label="订单完成超过:" label-width="100px">
          <el-input v-model="input3" placeholder="7"></el-input
          ><span class="span">分</span>
          <span class="order">自动结束交易，不能申请售后</span>
        </el-form-item>

        <el-form-item label="订单完成超过:" label-width="100px">
          <el-input v-model="input4" placeholder="7"></el-input
          ><span class="span">分</span>
          <span class="order">自动五星好评</span>
        </el-form-item>
        <el-form-item label="" label-width="100px">
          <el-button type="primary" @click="open">提交</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      input1: "",
      input2: "",
      input3: "",
      input4: "",

      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
    };
  },
  methods: {
    open() {
      this.$confirm("您是否要提交修改?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((value) => {
          this.$axios
            .post("/orderSetting/update/1", {
              commentOvertime: 0,
              confirmOvertime: 0,
              finishOvertime: 0,
              flashOrderOvertime: 0,
              id: 0,
              normalOrderOvertime: 0,
            })
            .then((response) => {
              console.log(response);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
/* 外框 */
.orderSet {
  width: 800px;
  height: 470px;
  border: 1px solid #ebeef5;
  padding: 35px 35px 15px;
  margin: 30px auto;
}
/* input */
.el-input {
  width: 250px;
  border-top-right-radius: 3px;
}
.span {
  width: 55px;
  height: 40px;
  display: inline-block;
  border: 1px solid #dcdfe6;
  border-left: 0px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;

  background-color: #f5f7fa;
  color: #909399;
  text-align: center;
}
.order {
  margin-left: 30px;
}
</style>